<template>
    <div class="cartSon">

        <van-swipe-cell>
        <div class="top">
        
            <van-checkbox v-model="checked" checked-color="#FF6E09"></van-checkbox>
            <img src="//gw.alicdn.com/tfs/TB1mByhAxTpK1RjSZFMXXbG_VXa-200-200.png_.webp" alt="">
            <p>&nbsp;&nbsp;></p>
        </div>
        <div class="goods">
            <van-checkbox v-model="checked" @change="newState(index, $event)" checked-color="#FF6E09"></van-checkbox>
            <van-card :price="originprice" desc="近15天最低" :title="proname" :thumb="img1">
                <template #tags>
        
                    <Counter :num="num" :id="index"></Counter>
                </template>
            </van-card>
        </div>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>
        
        
</div>
</template>

<script>
import toCoun from './toCoun.vue'
export default {
    components: {
        toCoun
    }
    ,
    data() {
        return {
            // 复选框
            checked: false,
            originprice: 60,
            proname: "Dior迪奥口红999哑光720丝绒888滋润772显白 复古520高级送礼专属",
            img1:'//gw.alicdn.com/bao/uploaded/i2/2965419761/O1CN01fkWHyW2LyaoD97OgD_!!0-item_pic.jpg_Q75.jpg_.webp',
            // 加减
            num: 1,
            index: 0,
            name:""
        };
    },
    methods: {
        newState() {
            
        }
    },
}
</script>

<style lang="scss" scoped>
.goods-card {
      margin: 0;
      background-color: red;
  }

  .delete-button {
      height: 100%;
  }
.cartSon{
    margin:auto;
    width: 7.02rem;
    background: #fff;
    font-size: .28rem;
    color: #333;
     border-radius: .24rem .24rem 0 0;
    position: relative;
        top: -1.4rem;
}
.cartSon .top{
    width: 3.82rem;
    height: .8rem;
    line-height: .8rem;
    display:flex;
    align-items: center;
    justify-content: space-around;
    margin:0 .24rem;
  
    img{
    width: .36rem;
    height: .36rem;
}
p{
    width: 2.24rem;
}
}
// 商品
        .goods {
            box-sizing:border-box;
            margin: auto;
            width: 7.02rem;
            display: flex;
            background: #fff;
            align-items: center;
            justify-content: space-around;
        }
    
        .goods>input {
            width: 1rem;
            border-radius: 100%;
    
        }

        ::v-deep .van-card {
            flex: 1;
            padding: .16rem 0;
            background-color: #fff;
            height:2.84rem;

        }
    
        .van-cell__value--alone img {
            width: .24rem;
            height: .24rem;
        }
    
        /* pic大小 */
        .van-card__thumb {
            width:1.8rem;
            margin-left: .40rem;
           
        }
        .van-card__content,
        .van-card__content>div
        {
            align-self: flex-end;
            width: 3.84rem;
            height: 2.96rem;
            // margin-left:.08rem;
            font-size: .28rem;
            color: #333;
        }
    .van-card__bottom .van-card__price{
        position:absolute;
        top: 1.34rem;
        font-size: .28rem;
        color: #ff5000;
    }
    .van-card__desc{
        margin-top: .16rem;
            color: #ff5000;
    }
    .goods .van-checkbox{
        width: .9rem;
        text-align: center;
        margin-left: .40rem;
        overflow:visible;
    }
        /* 步进器 */
        .van-stepper {
            width: 1.84rem;
            position: absolute;
            right: .16rem;
            bottom: 0;
        }
    
        ::v-deep .van-submit-bar {
            bottom: 1rem;
            width: 7.5rem;
        }
</style>